var customPopverData = [
	{'id': 'id1', 'name': '超时1', 'size': 12},
	{'id': 'id2', 'name': '阿斯蒂芬2', 'size': 13},
	{'id': 'id3', 'name': '传输3', 'size': 8},
	{'id': 'id5', 'name': '反恐精英5', 'size': 3},
	{'id': 'id6', 'name': '重试6', 'size': 1},
	{'id': 'id7', 'name': '草食动物7', 'size': 0},
	{'id': 'id8', 'name': '不听8', 'size': 2},
	{'id': 'id9', 'name': '参赛队伍9', 'size': 6},
];
var shareData = [
	{guid: '1', userName: 'u1'},
	{guid: '2', userName: '测试2'},
	{guid: '3', userName: '参数3'},
	{guid: '4', userName: '超时4'},
	{guid: '5', userName: '重试5'},
	{guid: '6', userName: '反恐精英6'},
	{guid: '7', userName: '传输7'},
	{guid: '8', userName: '厂商8'},
	{guid: '9', userName: '超时9'},
];

(function(doc) {
	/*********** 第一个按钮 可多选 功能 start ************/
	var favoriteDiv = doc.createElement('div');
	favoriteDiv.setAttribute('id', 'favorites');
	favoriteDiv.setAttribute('class', 'mui-popover mui-popover-action custom-popover favorites');
	favoriteDiv.innerHTML = '<ul class="mui-table-view table-view-top">\
								<li class="mui-table-view-cell center">\
									<a href="#favorites" class="mui-icon mui-icon-closeempty"></a>\
									<span class="title">选择项</span>\
								</li>\
								<li class="mui-table-view-cell">\
									<a id="createF" href="#favorites" style="color: #0091FF;">+ 新建项</a>\
								</li>\
							</ul>\
							<ul class="mui-table-view table-view-middle">\
								<li class="mui-scroll-wrapper">\
									<div class="mui-scroll"><ul class="mui-table-view"></ul></div>\
								</li>\
							</ul>';
	// 此组件中间列表区域原结构是 <ul class="mui-table-view table-view-middle"></ul> 在安卓机中会出现无法滚动的现象
	// 为解决无法滚动 特添加 mui-scroll-wrapper  mui-scroll 结构 并使用mui('.mui-scroll-wrapper').scroll() 进行初始化
	doc.body.appendChild(favoriteDiv);
	mui('.mui-scroll-wrapper').scroll({
		bounce: true,
		indicators: true,
		deceleration: 0.0006
	});
	
	var promptExt = '<textarea class="favorite-tips" rows="3" \
						style="font-size: 14px; width: 100%; padding: 5px; margin: 10px 0 -10px 0; border-radius: 0;" \
						placeholder="请输入收藏夹说明"></textarea>'
	
	// 初始化组件列表
	initPopover();
	
	// 新建按钮点击事件监听
	doc.getElementById('createF').addEventListener('tap', function() {
		mui.prompt('新建项', '请输入名称', ' ', ['取消', '确认'], function(e) {
			// e.index为propmpt的按钮数组 ['取消', '确认'] 的索引值 e.index==0：取消按钮  e.index==1：确认按钮
			if (e.index == 1) {
				// 关于trim方法可参考博客   js去空 去除空格
				var name = trim(doc.querySelector('.mui-popup-input input').value);
				var tips = trim(doc.querySelector('.mui-popup-input textarea.favorite-tips').value);
				if (!name || name.length < 2 || name.length > 10) {
					mui.toast('名称 2~10 个字符');
					doc.querySelector('.mui-popup-input input').value = !name ? '' : name;
					return false;
				}
				if (tips > 200) {
					mui.toast('收藏夹说明200个字符内');
					return false;
				}
				
				// 这里可以执行自己的ajax请求进行数据保存操作
				// 执行ajax后 重新渲染初始化mui.popover底部弹出组件
				initPopover();
				
				mui.showLoading() // 自定义 mui loading 可参考博客 
			}
		},'div')
		// 一定要在执行mui.prompt方法后在执行一下方法  往prompt中添加自定义的 input或textarea 内容
		var popupInput = doc.querySelector('.mui-popup').querySelector('.mui-popup-input')
		popupInput.innerHTML = popupInput.innerHTML + promptExt
	}, false);
	
	// popover列表组件关闭按钮监听
	doc.querySelector('.mui-icon.mui-icon-closeempty').addEventListener('tap', function() {
		// dosomething
	}, false);
	
	// 初始化或更新popover列表组件内容
	function initPopover() {
		var html = '';
		// alert('init favorite popup -> init popup -> ')
		// 获取当前情况下的收藏夹列表进行初始化操作
		for (var i in customPopverData) {
			var checked = customPopverData[i].include ? 'checked' : ''; 
			html += '<li class="mui-table-view-cell">\
				<div class="mui-input-row mui-checkbox">\
				  <label>\
					  <div class="title">' + customPopverData[i].name + '</div>\
					  <div class="tips"><span class="num">' + customPopverData[i].size + '</span>个内容</div>\
				  </label>\
				  <input name="favoriteCategory" value="' + customPopverData[i].id + '" \
				  type="checkbox" ' + checked + '>\
				</div>\
			</li>';
		}
		// type="checkbox" ' + checked + ' onchange="favoriteChange(this)">\
		html += '';
		// html += '<li class="mui-table-view-cell" style="height: 60px;"></li>'
		doc.querySelector('.mui-table-view.table-view-middle .mui-table-view').innerHTML = html;
		listnerFavoriteChange();
	}
	
	// 监听组件中的复选框状态 
	function listnerFavoriteChange() {
		var checkboxs = doc.querySelectorAll('input[name="favoriteCategory"]');
		// alert('len -> ' + checkboxs.length)
		mui.each(checkboxs, function(index, ele) {
			ele.addEventListener('change', function() {
				var html = '<div>功　能：mui.custom.popover.search</div>';
				var vals = [], texts = [], nums = [];
				mui.each(checkboxs, function(index, item){
					if (item.checked) {
						vals.push(item.value);
						texts.push(item.parentNode.querySelector('.title').innerText);
						nums.push(item.parentNode.querySelector('span.num').innerText);
					}
				});
				html += '<div>已选择：\
							<div>　nums：' + nums.join(",") + '</div>\
							<div>　names：' + texts.join(",") + '</div>\
							<div>　values：' + vals.join(",") + '</div>\
						</div>';
				document.querySelector("#resBox").innerHTML=html;
			}, false);
		})
	}
	/*********** 第一个按钮 可多选 功能 end ************/


	/*************  单选 可搜索功能 start *****************/
	var inputVal = '', shareDataAll = []; shareDiv = doc.createElement('div');
	shareDiv.setAttribute('id', 'share');
	shareDiv.setAttribute('class', 'mui-popover mui-popover-action custom-popover search share');
	shareDiv.innerHTML = '<ul class="mui-table-view table-view-top">\
								<li class="mui-table-view-cell center">\
									<a href="#share" class="mui-icon mui-icon-closeempty"></a>\
									<span class="title">选择项分享人</span>\
								</li>\
								<li class="mui-table-view-cell">\
									<div class="mui-input-row">\
										<span class="mui-icon mui-icon-search"></span>\
										<input id="searchInput" type="text" class="mui-input-clear" \
										style="font-size: 15px;" autocomplete="off" placeholder="请输入">\
									</div>\
								</li>\
							</ul>\
							<ul class="mui-table-view table-view-middle">\
								<li class="mui-scroll-wrapper">\
									<div class="mui-scroll"><ul class="mui-table-view"></ul></div>\
								</li>\
							</ul>';
	// 此组件中间列表区域原结构是 <ul class="mui-table-view table-view-middle"></ul> 在安卓机中会出现无法滚动的现象
	// 为解决无法滚动 特添加 mui-scroll-wrapper  mui-scroll 结构 并使用mui('.mui-scroll-wrapper').scroll() 进行初始化
	doc.body.appendChild(shareDiv);
	mui('.mui-scroll-wrapper').scroll({
		bounce: true,
		indicators: true,
		deceleration: 0.0006
	});
	
	initSharePopover();
	
	// 初始化或更新popover列表组件内容
	function initSharePopover() {
		shareDataAll = shareData;
		renderListHtml();
	}
	
	function renderListHtml() {
		var shareHtml = '';
		// alert('init favorite popup -> init popup -> ')
		// 获取当前情况下的收藏夹列表进行初始化操作
		for (var i in shareData) {
			shareHtml += '<li class="mui-table-view-cell">\
				  <a class="share-item" href="#share" id="' + shareData[i].guid + '" \
				  name="' + shareData[i].userName + '">' + shareData[i].userName + '</a>\
			</li>';
		}
		// type="checkbox" ' + checked + ' onchange="favoriteChange(this)">\
		shareHtml += '';
		// html += '<li class="mui-table-view-cell" style="height: 60px;"></li>'
		doc.querySelector('.share .mui-table-view.table-view-middle .mui-table-view').innerHTML = shareHtml;
		listnerShareChoose();
	}
	
	function listnerShareChoose() {
		mui.each(document.querySelectorAll('.share .table-view-middle .share-item'), function(i, ele) {
			ele.addEventListener('tap', function() {
				var html = '<div>功　能：mui.custom.popover.search</div>';
				var val = ele.getAttribute('id');
				var name = ele.getAttribute('name');
				html += '<div>已选择：<div>　text：' + name + '</div><div>　value：' + val + '</div></div>';
				document.querySelector("#resBox").innerHTML=html;
			}, false);
		});
		
		document.querySelector('.share .table-view-top .mui-input-row input').addEventListener('keydown',  function(event) {
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if (e.keyCode === 13) {
				if (this.value) {
					inputVal = this.value;
					shareData = shareDataAll.filter(shareItemFilter);
				} else {
					shareData = shareDataAll;
				}
				renderListHtml();
			}
		});
	}
	
	function shareItemFilter(item) {
		return item.userName.includes(inputVal);
	}
	/*************  单选 可搜索功能 end *****************/
}(document));